<!-- eslint-disable no-const-assign -->
<!-- eslint-disable no-const-assign -->
<template>
  <div>
    <a-modal v-model:visible="visible" title="专业名称：供电专业 &nbsp &nbsp &nbsp &nbsp &nbsp 科室名称：供电技术科" okText="提交" cancelText="取消" @ok="onSubmit" @cancel="cancleClick">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="16">
            <a-form-item label="绝缘工具名称" required v-bind="validateInfos.jueyuangongju">
              <a-input v-model:value="modelRef.jueyuangongju" />
            </a-form-item>
            <strong>电压试验标准：</strong> 
            <a-form-item label="工作电压（kv):" required v-bind="validateInfos.gongzuodianya">
              <!-- <a-input v-model:value="modelRef.gongzuodianya" /> -->
              <a-input-number id="inputNumber" v-model:value="modelRef.gongzuodianya" :min="1" :max="1000" />
            </a-form-item>
            <strong>交流试验电压：</strong> 
            <a-form-item label="试验电压（kv):" required v-bind="validateInfos.shiyandianya">
              <a-input-number id="inputNumber" v-model:value="modelRef.shiyandianya" :min="1" :max="1000" />
              <!-- <a-input v-model:value="modelRef.shiyandianya" /> -->
            </a-form-item>
            <a-form-item label="试验长度（m):" required v-bind="validateInfos.shiyanchangdu">
              <a-input-number id="inputNumber" v-model:value="modelRef.shiyanchangdu" :min="0" :max="1000" />
              <!-- <a-input v-model:value="modelRef.shiyanchangdu" /> -->
            </a-form-item>
            <a-form-item label="试验持续时间（分):" required v-bind="validateInfos.shiyanchixushijian">
              <!-- <a-input v-model:value="modelRef.shiyanchixushijian" /> -->
              <a-input-number id="inputNumber" v-model:value="modelRef.shiyanchixushijian" :min="1" :max="1000" />
            </a-form-item>
            <a-form-item label="试验周期（月):" required v-bind="validateInfos.shiyanzhouqi">
              <!-- <a-input v-model:value="modelRef.shiyanzhouqi" /> -->
              <a-input-number id="inputNumber" v-model:value="modelRef.shiyanzhouqi" :min="1" :max="1000" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="单位:" required v-bind="validateInfos.danwei">
              <a-input v-model:value="modelRef.danwei" />
            </a-form-item>
            <a-form-item label="用途:" required v-bind="validateInfos.yongtu">
              <a-input v-model:value="modelRef.yongtu" />
            </a-form-item>
            <a-form-item label="备注:" required v-bind="validateInfos.beizhu">
              <a-textarea v-model:value="modelRef.beizhu" placeholder="" :rows="4" show-count :maxlength="100" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>
    
  
    <script setup>
  import { ref ,reactive, } from 'vue'
  // import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { Form ,message} from 'ant-design-vue'
  // import { clone } from 'lodash-es';
  // import request from '@/utils/request'
  import {QuotaApi} from '../../../api/gd-server-data/data'
  
  
  const content = reactive({
    id:'',
    workShop: '',
    className: '',
    toolName:'',
    count: 0,
    unit: '',
  })
  
  // const props = defineProps(['rec'])
  // console.log(this.rec)
  const emit = defineEmits(['loadData'])
  const rulesRef = reactive({
    workShop: [{
      required: true,
      message: '请输入车间名称',
    }],
    className: [{
      required: true,
      message: 'Please input class',
    }],
    toolName: [{
      required: true,
      message: 'Please input tool',
    }],
    count: [{
      required: true,
      message: 'Please input count',
    }],
    unit: [{
      required: true,
      message: 'Please input unit',
    }],
  })
  const useForm = Form.useForm
  // eslint-disable-next-line no-empty-pattern
  const {
    // validate
  } = useForm(content, rulesRef)
  
  const labelCol = reactive({
    span: 4,
  })
  
  const wrapperCol = reactive({
    span: 7,
  })
  // const options = ref([{
  //       value: '验电器',
  //       label: '验电器',
  //     }, 
  //     {
  //       value: '110kv验电器',
  //       label: '110kv验电器',
  //     },
  //      {
  //       value: '27.5kv验电器',
  //       label: '27.5kv验电器',
  //     },
  //      {
  //       value: '10kv验电器',
  //       label: '10kv验电器',
  //     },
  //      {
  //       value: '打杂杆',
  //       label: '打杂杆',
  //     },
  //      {
  //       value: '接地杆',
  //       label: '接地杆',
  //     },
  //      {
  //       value: '绝缘手套',
  //       label: '绝缘手套',
  //     },
  //      {
  //       value: '绝缘靴',
  //       label: '绝缘靴',
  //     },
  //      {
  //       value: '打冰杆',
  //       label: '打冰杆',
  //     },
  //      {
  //       value: '绝缘测杆',
  //       label: '绝缘测杆',
  //     },
  //      {
  //       value: '绝缘操作手柄',
  //       label: '绝缘操作手柄',
  //     },
  //   ]);
  
  const visible = ref(false)
  // const content = reactive({})
  const showModal = (rec) => {
    console.log(rec)
    // content.value = clone(rec)
    // console.log(content.value)
    content.id=rec.id
    content.workShop=rec.workShop
    content.className=rec.className
    content.toolName=rec.toolName
    content.count=rec.count
    content.unit=rec.unit
  
    visible.value = true
  
  }
  // const defaultPercent = ref(0);
  // const increase = () => {
  //       content.count ++;
     
  //     };
  // const decline = () => {
  //       content.count --;
     
  //     };
  //     const handleChange = value => {
  //       console.log(`selected ${value}`);
  //     };
  //     const handleBlur = () => {
  //       console.log('blur');
  //     };
  //     const handleFocus = () => {
  //       console.log('focus');
  //     };
  //     const filterOption = (input, option) => {
  //       return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  //     };
  
    //   const onSubmit = () => {
    //     content.count=Number(content.count)
    //   // console.log(imageUrl) 
    //     request({
    //       url: '/feathers/quota-process/' + content.id,
    //       data: {
    //         ...content,
    //       },
    //       method: 'patch'
    //     }).then(() => {
    //       // location.reload()
    //       content.id=''
    //       content.workShop=''
    //       content.className=''
    //       content.toolName=''
    //       content.count=0
    //       content.unit=''
    //       // 关闭窗口 刷新页面
    //       visible.value = false
    //       emit('loadData')
    //     })
    // .catch(err => {
    //   console.log('error', err);
    // });
  // };
      
  const {
    validate,
    resetFields,
    validateInfos,
  } = useForm(content, rulesRef)
  
  const onSubmit = () => {
    validate().then(() => {
      content.count=Number(content.count)
      QuotaApi.edit(content.id,content)
      console.log(content)
        }).then(() => {
          // content.id=''
          content.workShop= ''
          content.className = ''
          content.toolName = ''
          content.count = ''
          content.unit=''
          // 关闭窗口 刷新页面
          visible.value = false
          emit('loadData')
          message.success('success')
      resetFields()
    }).catch(err => {
      console.log('error', err);
    });
  };
  
      
  defineExpose({
    showModal
  })
    </script>
  
  <style lang="less" scoped>
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      flex: 1;
    }
  }
  
  
  .gutter-example :deep(.ant-row > div) {
    background: transparent;
    border: 0;
  }
  .gutter-box {
    // background: #00a0e9;
    padding: 5px 0;
  }
  </style>